<template>
  <div class="table">
    <el-table
      :data="dataList"
      :header-cell-style="{ color: '#000', background: '#EEF5FE' }"
      height="100%"
      border
      empty-text="暂无数据"
      stripe
    >
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="手机号" align="center" prop="mobile" />
      <el-table-column label="内容" align="center" prop="content" />
      <el-table-column label="图片" align="center" >
        <template #default="{row}">
          <view class="imgs">
            <el-image
              v-for="(item,index) in row.imgList" :key="index"
              style="width: 50px; height: 50px;margin-right:10px;"
              :src="item"
              :preview-teleported="true"
              :max-scale="7"
              :min-scale="1"
              :preview-src-list="row.imgList"
              :initial-index="index"
              fit="cover"
            />
          </view>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />
    </el-table>
  </div>
</template>

<script setup>
import { onMounted,reactive,ref,computed } from "vue";
const props = defineProps({
  dataList: {
    type: Array,
    default: [],
  },
})

const previewImage = (url) => {

}

</script>

<style lang="less" scoped>
.imgs{
  display: flex;
  flex-wrap: wrap;
  img{
    margin-right: 10px;
  }
}
</style>